<template>
  <div>
    <!-- 附近 -->
    <div class="nearby">
      <img src="./images/shop/更多.png" alt>
      <span>附近商家</span>
    </div>
    <!-- 商家列表 -->
    <div class="shoplist" v-if="shops.length" >
      <div class="shopitem" v-for="(item,index) in shops" :key='index' @click="goto(item.id)">
        <router-link to>
          <div class="shoplogo">
            <img :src="'https://picsum.photos/400?randow='+index" >
          </div>
          <div class="shopcontainer">
            <div class="title">
              <div class="tips"></div>
              <div class="name">{{item.name}}</div>
            </div>
            <div class="sales">
              <div class="stats">
                <img
                  src=""
                  alt="stars"
                >
              </div>
              <div class="values">评分{{item.rating}}</div>
            </div>
            <div class="cost">
              <span>￥{{item.float_minimum_order_amount}}元起送</span>
              <span>{{item.piecewise_agent_fee.tips}}</span>
            </div>
          </div>
          <div class="distribution">
            <span>{{item.delivery_mode.text}}</span>
            <i>687m|22分钟</i>
          </div>
        </router-link>
      </div>
    </div>
    <!-- 数据获取中显示 -->
    <div v-else class="hidden">正在努力获取中...</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState(['shops'])
  },
  methods: {
    //获取店铺ID 
    goto(restaurant_id){
      this.$router.push(`/shop/${restaurant_id}`)
      // this.$store.dispatch('reciveGood',restaurant_id)
    }
  },
};
</script>
<style lang="scss" scoped>
/* 附近  */
.nearby {
  display: flex;
  margin: 10px 0 10px 10px;
  img {
    width: 0.3rem;
    height: 0.3rem;
    filter: grayscale(10%);
  }
  span {
    font-size: 0.12rem;
    line-height: 0.3rem;
    color: gray;
    margin-left: 5px;
  }
}

/* 商家列表 */
.shopitem {
  margin-bottom: 20px;
  a {
    display: flex;
    .shoplogo {
      width: 20%;
      img {
        width: 100%;
        height: auto;
      }
    }
    .shopcontainer {
      width: 58%;
      margin: 0 5px 0 15px;
      display: flex;
      flex-flow: wrap;
      .title {
        width: 100%;
        .name {
          font-size: 0.3rem;
          color: black;
          font-weight: 600;
        }
      }
      .sales {
        width: 100%;
        display: flex;
        .stats {
          img {
            display: block;
          }
        }
        .values {
          font-size: 0.2rem;
          color: gray;
        }
      }
      .cost {
        width: 100%;
        display: flex;
        span {
          font-size: 0.2rem;
          color: gray;
          display: block;
          margin-left: 5px;
        }
      }
    }
    .distribution {
      width: 22%;
      display: flex;
      flex-flow: wrap;
      justify-content: flex-end;
      align-content: center;
      span {
        font-size: 0.2rem;
        display: block;
        width: 60%;
        margin-bottom: 0.1rem;
        text-align: center;
        background: #0097ff;
        color: white;
        height: 0.3rem;
        line-height: 0.3rem;
      }
      i {
        width: 100%;
        font-size: 0.1rem;
        display: block;
        text-align: left;
        margin-top: 0.1rem;
        color: gray;
      }
    }
  }
}
.hidden{
  font-size: 18px;
}
</style>
